<script setup>
import Logo from '@/components/Logo.vue'
import Lang from '@/components/Lang.vue'
import { showToast } from 'vant'
import { computed, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { loginApi, getAllUserApi } from '@/apis/user.js'

const router = useRouter()

const loginshow = ref(false)

const getpwdshow = ref(false)

let list = ref([]) //用户名称列表

const uname = ref('')
const upwd = ref('')

const getPwd = () => {
  loginshow.value = false
  getpwdshow.value = true
}

// 获取用户名列表
const getAllUser = async () => {
  let res = await getAllUserApi()
  if (res.data.code == 200) {
    list.value = res.data.data.lists
  } else {
    showToast(res.data.msg)
  }
}
getAllUser()
const Login = async () => {
  if (uname.value.trim() == '' || upwd.value.trim() == '') {
    return showToast('请将登录信息填写完整！')
  }
  const res = await loginApi({ username: uname.value, password: upwd.value })
  // console.log(res);
  if (res.data.code == 200) {
    // 存储token和token过期时间
    localStorage.setItem('token', res.data.data.token)
    localStorage.setItem('token_time', res.data.data.expire_at)
    // 跳转
    router.replace('/cn/list')
  } else {
    showToast(res.data.msg)
  }
}
let finflag = ref(false)
let itemshow = ref(false)
let chooseflag = ref(false)
const foucusIn = () => {
  finflag.value = true
  chooseflag.value = false
}
//选择模糊数据选项
const chooseItem = (val) => {
  uname.value = val
  finflag.value = false
  chooseflag.value = true
}

const filterlist = computed(() => {
  let cm = list.value.filter((item) => {
    return item.indexOf(uname.value) !== -1
  })
  return cm
})

const Blur = () => {
  if (filterlist.value.length >= 1) {
    itemshow.value = true
    if (chooseflag.value) {
      itemshow.value = false
    }
  }
}

watch(uname, (newVal) => {
  if (newVal.length >= 1) {
    itemshow.value = true
    if (chooseflag.value) {
      itemshow.value = false
    }
  } else {
    itemshow.value = false
  }
})
</script>
<template>
  <div class="index box">
    <Logo />
    <div class="indexcontainer cbox">
      <Lang />
      <img src="@/assets/img/index_title_cn.png" class="index_title" />
      <div class="tologinbox" @click="loginshow = true">
        <img src="@/assets/img/btn_login_cn.png" class="btn_login btnani" />
        <img src="@/assets/img/hand.png" class="hand btnani" />
      </div>
      <!-- 弹窗—找回密码 -->
      <div class="getpwdbox tbox clmcenter" v-show="getpwdshow">
        <p>请联系您的审线人员</p>
        <button type="button" @click="getpwdshow = false">确认</button>
      </div>
      <!-- 登录框 -->
      <div class="loginbox tbox clmcenter" v-show="loginshow">
        <div class="login_container clmcenter">
          <form class="loginfrm">
            <div class="litem">
              <p class="ltxt">账户名称：</p>
              <input type="text" v-model="uname" @focus="foucusIn" @blur="Blur" />
              <ul class="checklist" v-show="itemshow">
                <li v-for="item in filterlist" :key="item" @click="chooseItem(item)">
                  {{ item }}
                </li>
              </ul>
            </div>
            <div class="litem">
              <p class="ltxt">账户密码：</p>
              <input type="password" v-model="upwd" class="pwdinput" />
            </div>
            <p class="getback" @click="getPwd">找回密码</p>
            <button type="button" class="btn_submit" @click="Login">提交</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index {
  .indexcontainer {
    background: url('@/assets/img/indexbg.jpg') no-repeat center center;
    background-size: cover;
    .index_title {
      position: absolute;
      top: 112px;
      right: 40px;
    }
    .tologinbox {
      position: absolute;
      right: 30px;
      bottom: 118px;
      width: 265px;
      height: 101px;
      .btn_login {
        width: 100%;
      }
      .hand {
        position: absolute;
        right: 21px;
        bottom: -24px;
        width: 58px;
        height: 56px;
        animation-delay: 0.5s;
      }
    }
    .tbox {
      top: -1px;
      left: 0;
      width: 100%;
      height: calc(100% + 1px);
      background: rgba($color: #000000, $alpha: 0.8);
    }
    // 登录
    .loginbox {
      position: absolute;
      z-index: 1;
      .login_container {
        width: 638px;
        height: 565px;
        background: #ffffff;
        border-radius: 50px;
        margin-bottom: 6rem;
        .loginfrm {
          width: 530px;
          .litem {
            position: relative;
            width: 100%;
            text-align: left;
            margin-bottom: 42px;
            p {
              color: #878787;
              font-size: 2.1rem;
              font-weight: bold;
            }
            input {
              color: #000000;
              font-size: 1.7rem;
              text-indent: 1rem;
              width: 100%;
              height: 90px;
              // background: url('@/assets/img/input.png') no-repeat;
              // background-size: 100% 100%;
              background: #f7f7f7;
              background-clip: padding-box;
              border: 2px solid transparent;
              border-radius: 18px;
              background-clip: padding-box, border-box;
              background-origin: padding-box, border-box;
              background-image: linear-gradient(to bottom, #ffffff, #efefef),
                linear-gradient(to bottom, #b1b6c9, #ffffff);
              margin-top: 1rem;
            }
            // 模糊查询结果列表
            .checklist {
              position: absolute;
              top: 135px;
              left: 0;
              z-index: 2;
              min-width: 100%;
              max-width: 110%;
              max-height: 500px;
              overflow: hidden scroll;
              background-color: #e7e7e7;
              border-radius: 8px;
              border: 1px solid #b1b6c9;
              box-sizing: border-box;
              li {
                width: 100%;
                height: 60px;
                line-height: 60px;
                text-indent: 1rem;
                color: #000000;
                font-size: 1.7rem;
                border-bottom: 1px solid #b1b6c9;
                box-sizing: border-box;
                // 超出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
          .getback {
            text-align: right;
            color: #000000;
            font-size: 1.7rem;
            margin-top: -20px;
          }
          .btn_submit {
            margin-top: 40px;
            color: #ffffff;
            background: #004c93;
            font-size: 2.53rem;
            font-weight: bold;
            width: 100%;
            height: 66px;
            border-radius: 33px;
            text-transform: uppercase;
          }
        }
      }
    }
    // 找回密码
    .getpwdbox {
      position: absolute;
      z-index: 1;
      font-size: 2.53rem;
      p {
        font-weight: 500;
        color: #ffffff;
      }
      button {
        width: 250px;
        height: 66px;
        border-radius: 32px;
        background: #ffffff;
        color: #004c93;
        font-weight: bold;
        margin-top: 30px;
      }
    }
  }
}
</style>
